<template>
  <div class="app">
    <myNavbar :title="title"></myNavbar>
    <list>
      <cell>
        <div class="shipping_order">
          <div class="shipping_order_Header">
            <text class="shipping_order_Header_Title">商品明细</text>
          </div>
          <div v-for="(item,index) in itemList">
            <div class="details_order_item">
              <div class="details_order_item_img">
                <image style="width:170px;height:170px;background-color: #f2f2f2"
                       :src="item.thumbnail"></image>
              </div>
              <div class="details_order_item_content">
                <div class="details_order_item_content_top">
                  <text class="details_order_item_title">{{ item.name }}</text>
                  <div style="display: flex;flex-direction: row">
                    <text class="details_order_red_icon">¥</text>
                    <text class="details_order_red_font">{{ item.price | price }}</text>
                  </div>
                </div>
                <div class="details_order_item_content_bottom">
                  <text class="details_order_item_subtitle">{{ item.spec }}</text>
                  <text class="details_order_item_number"> x {{ item.quantity | number }}</text>
                </div>
                <div class="emptyBarrel_box" v-if="payListType == true && item.subType == 4">
                  <text class="emptyBarrel_title">回桶：</text>
                  <div class="product_botton_box" style="display:flex;flex-direction:row;">
                    <div class="product_botton_left" @click="reductionClick(index)">
                      <text class="product_botton_icon">&#xe609;</text>
                    </div>
                    <div class="product_botton_input" @click="inputClick(index)">
                      <text class="product_botton_input_Title">{{ item.emptyBarrelQuantity }}</text>
                    </div>
                    <div class="product_botton_right" @click="addClick(index)">
                      <text class="product_botton_icon">&#xe620;</text>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="logistics_box" v-if="orderForm.shippingMethod == 0">
              <text class="emptyBarrel_title">物流单号：</text>
              <div class="product_botton_box" style="display:flex;flex-direction:row;">
                <input class="logistics_input" ref="input1" type="number" v-model="item.trackingNo"/>
              </div>
            </div>
          </div>
          <div style="position: relative">
            <div v-for="(item,index) in barrelForm" v-if="accordingTitle == false ?index<=1:index>=0">
              <div class="details_order_item">
                <div class="details_order_item_img">
                  <image style="width:170px;height:170px;background-color: #f2f2f2"
                         :src="item.thumbnail"></image>
                </div>
                <div class="details_order_item_content">
                  <div class="details_order_item_content_top">
                    <text class="details_order_item_title">{{ item.name }}</text>
                    <div style="display: flex;flex-direction: row">
                      <text class="details_order_red_icon">{{ item.virtualType == 1 ? '+' : '' }}</text>
                      <text class="details_order_red_font">{{ item.price | price }}</text>
                    </div>
                  </div>
                  <div class="details_order_item_content_bottom">
                    <text class="details_order_item_subtitle">{{ item.spec }}</text>
                    <text class="details_order_item_number"> x {{ item.quantity | number }}</text>
                  </div>
                </div>
                <div class="details_order_item_content_tag">
                  <text class="details_order_item_content_tagTitle">{{ item.virtualType == 1 ? '押桶' : '退桶' }}</text>
                </div>
              </div>
            </div>
            <div style="width:640px;height: 60px" v-if="accordingTitle == true"></div>
            <div @click="accordingClick" class="accordingCSS" v-if="barrelForm.length >=2">
              <text class="accordingIcon">{{ accordingTitle == true ? '&#xe62c;' : '&#xe695;' }}</text>
            </div>
          </div>
          <div class="details_order_item_bottom">
            <div class="row_sb_mg20">
              <text class="details_order_item_bottom_titel">店铺优惠：</text>
              <div style="display: flex;flex-direction: row">
                <text class="details_order_black_icon">¥</text>
                <text class="details_order_black_font">{{ discount | price }}</text>
              </div>
            </div>
            <div class="row_sb_mg20">
              <text class="details_order_item_bottom_titel">运费：</text>
              <div style="display: flex;flex-direction: row">
                <text class="details_order_black_icon">¥</text>
                <text class="details_order_black_font">{{ freight | price }}</text>
              </div>
            </div>
            <div class="row_sb_mg20">
              <text class="details_order_item_bottom_totalTitel">实付款：</text>
              <div style="display: flex;flex-direction: row">
                <text class="details_order_red_icon">¥</text>
                <text class="details_order_red_font">{{ amountPayable | price }}</text>
              </div>
            </div>
          </div>
        </div>
        <div class="shipping_order">
          <div class="details_address">
            <div class="details_address_top">
              <text class="details_address_name">{{ orderForm.consignee }}</text>
              <text class="details_address_phone">{{ orderForm.phone }}</text>
              <div class="details_lines"></div>
              <text class="details_right_copy" @click="copyAddressClick">复制</text>
            </div>
            <div class="details_address_bottom">
              <text class="details_address_title">{{ orderForm.address }}</text>
            </div>
            <div class="details_address_bottom_memo" style="margin-top: 20px;"
                 v-if="orderForm.shippingMethod == 2&&orderForm.memo!=''">
              <text class="details_address_title">备注：{{ orderForm.memo }}</text>
            </div>
          </div>
        </div>
        <div>
          <div class="shipping_order" v-if="paymentVo.length>0">
            <div class="shipping_order_Header">
              <text class="shipping_order_Header_Title">支付方式</text>
            </div>
            <div :class="[index != paymentVo.length-1?'submit_payMethod_ContentTwo':'submit_payMethod_ContentThree']"
                 v-for="(item,index) in paymentVo">
              <div class="submit_payMethod_Content_Row">
                <text class="submit_payMethod_Content_Title">{{ item.paymentPluginName }}</text>
              </div>
              <div style="display: flex;flex-direction: row;align-items: center">
                <text style="font-size: 26px;margin-right: 10px;color: red;"> ¥ {{ item.amount | price }}</text>
              </div>
            </div>
            <div class="shipping_pay_history" v-if="orderForm.shippingMethod == 2">
              <text style="font-size: 24px" v-if="isWaterShow==true">历史欠票：</text>
              <text style="font-size: 24px" v-if="isWaterShow==true">{{ receivableQuantity|number }}张；</text>
              <text style="font-size: 24px" v-if="emptyBarrelMany>0">存桶数：</text>
              <text style="font-size: 24px;margin-right: 10px;" v-if="emptyBarrelMany>0">
                {{ emptyBarrelMany | number }}
              </text>
              <text style="font-size: 24px" v-if="emptyBarrelLess>0">欠桶数：</text>
              <text style="font-size: 24px;margin-right: 10px;" v-if="emptyBarrelLess>0">
                {{ emptyBarrelLess | number }}
              </text>
              <text style="font-size: 24px">历史欠款：</text>
              <text style="font-size: 24px">¥{{ receivableAmount | price }}</text>
            </div>
            <div class="shipping_pay_total" v-if="orderForm.shippingMethod == 2">
              <text style="font-size: 24px;color:red">本单剩余应收：</text>
              <text style="font-size: 24px;color:red">¥{{ amount | price }}</text>
            </div>
          </div>
        </div>
        <div>
          <div class="shipping_order" v-if="orderForm.shippingMethod == 2">
            <div :class="[index != pay.length-1?'submit_payMethod_ContentTwo':'submit_payMethod_ContentThree']"
                 v-for="(item,index) in pay" @click="editShipping(index)"
                 v-if="(item.isShow==true && item.paymentPluginId == 'paperPayPlugin') || item.paymentPluginId != 'paperPayPlugin'">
              <div class="submit_payMethod_Content_Row">
                <div>
                  <image :class="[index==2?'submit_payMethod_Content_ImgTwo':'submit_payMethod_Content_Img']"
                         :src="item.img"></image>
                </div>
                <text class="submit_payMethod_Content_Title">{{ item.paymentPluginName }}</text>
              </div>
              <div style="display: flex;flex-direction: row;align-items: center">
                <text style="font-size: 24px;margin-right: 10px;"
                      v-if="item.paymentPluginId == 'paperPayPlugin' && item.quantity > 0">
                  ({{ item.quantity | number }}张)
                </text>
                <text style="font-size: 24px;margin-right: 10px;"
                      v-if="item.paymentPluginId == 'paperPayPlugin' && item.quantity == 0 && item.amount !=0">请输入水票，</text>
                <text style="font-size: 26px;margin-right: 10px;color: red;">¥ {{ item.amount | price }}</text>
                <text class="icon">&#xe61f;</text>
              </div>
            </div>
          </div>
        </div>
        <!--                支付方式金额弹窗-->
        <div class="payment_isMask" v-if="payType == true">
          <div class="payment_isMask_box">
            <text class="payment_isMask_headerTitle">{{ payTitle }}</text>
            <div style="display: flex;flex-direction: row;align-items: center;margin-top: 20px"
                 v-if="payId == 'paperPayPlugin'">
              <text style="font-size: 30px;line-height: 70px">水票张数：</text>
              <input class="payment_isMask_input" v-model="waterQutity" placeholder="请输入水票张数">
            </div>
            <div style="display: flex;flex-direction: row;align-items: center;margin-top: 20px">
              <text style="font-size: 30px;line-height: 70px">{{ payId == 'paperPayPlugin' ? '抵扣金额：' : payId == 'cashPayPlugin' ? '现金金额：' : '欠款金额：' }}</text>
              <input class="payment_isMask_input" v-model="amountInput" placeholder="请输入金额"/>
            </div>
            <div class="payment_isMask_bottom">
              <button class="payment_isMask_right_button" text="取消" model="gray"
                      @click="cancelClick"></button>
              <button class="payment_isMask_left_button" text="确定" @click="determineClick"></button>
            </div>
          </div>
        </div>

        <div class="shipping_order" v-if="orderForm.shippingMethod == 2 && orderForm.shippingStatus == 1">
          <div class="shipping_order_Header">
            <text class="shipping_order_Header_Title">配送信息</text>
          </div>
          <div>
            <div class="shippingInfo" @click="siteClick" style="margin-top: 30px">
              <text class="shippingInfo_title">配送站点</text>
              <div class="shippingInfo_box">
                <div style="display:flex;flex-direction:row;align-item:center">
                  <text class="shippingInfo_subtitle">{{ shopName }}</text>
<!--                  <icon content="ios-arrow-forward" class="submit_product_details_Icon"></icon>-->
                  <text class="submit_product_details_Icon">&#xe61f;</text>
                </div>
              </div>
            </div>
            <div class="shippingInfo" style="margin-top: 30px" @click="personnelClick">
              <text class="shippingInfo_title">配送人员</text>
              <div class="shippingInfo_box">
                <div style="display:flex;flex-direction:row;align-item:center">
                  <text class="shippingInfo_subtitle">{{ personnelName }}</text>
<!--                  <icon content="ios-arrow-forward" class="submit_product_details_Icon"></icon>-->
                  <text class="submit_product_details_Icon">&#xe61f;</text>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-if="orderForm.shippingMethod == 2 && payListType == false">
          <div class="isMask_Botton" v-if="orderForm.shippingStatus == 1">
            <button class="isMask_Botton_Box botton_Bg_Color" @click="aDeliveryClick" :text="aDeliveryTitle"
                    :loading="aDeliveryType"></button>
          </div>
          <div class="isMask_Botton" v-if="orderForm.shippingStatus == 2">
            <button class="isMask_Botton_Box botton_Bg_Color" @click="deliveryClick" :text="deliveryTitle"
                    :loading="deliveryType"></button>
          </div>
          <div class="isMask_Botton" v-if="orderForm.shippingStatus == 3">
            <button class="isMask_Botton_Box botton_Bg_Color" @click="receivedClick" :text="receivedTitle"
                    :loading="receivedType"></button>
          </div>
        </div>
        <div v-if="orderForm.shippingMethod == 0">
          <div class="isMask_Botton" v-if="orderForm.shippingStatus == 1">
            <button class="isMask_Botton_Box botton_Bg_Color" @click="shippingClick" :text="shippingTitle"
                    :loading="shippingType"></button>
          </div>
          <div class="isMask_Botton" v-if="orderForm.shippingStatus == 2 || orderForm.shippingStatus == 3">
            <button class="isMask_Botton_Box botton_Bg_Color" @click="updateTrackingNoClick"
                    :text="updateTitle" :loading="updateType"></button>
          </div>
        </div>
        <div class="waterBottonBox" v-if="payListType == true">
          <button class="water_botton botton_Bg_Color" @click="betClick('押桶')" text="押桶"></button>
          <button class="water_botton botton_Bg_Color" @click="bucketBack('退桶')" text="退桶"></button>
          <button class="water_botton botton_Bg_Color" v-if="orderForm.shippingStatus == 2"
                  @click="deliveryClick" :text="deliveryTitle"
                  :loading="deliveryType"></button>
          <button class="water_botton botton_Bg_Color" v-if="orderForm.shippingStatus == 3"
                  @click="receivedClick" :text="receivedTitle"
                  :loading="receivedType"></button>
        </div>
        <shippingSite :shopIndex="shopIndex" v-if="siteType == true" @cencleSite="cencleSite"
                      @completeSite="completeSite"></shippingSite>
        <personnel :personnelIndex="personnelIndex" v-if="personnelType == true"
                   @completePersonnel="completePersonnel" @cenclePersonnel="cenclePersonnel"></personnel>

        <!--        押桶，退桶弹窗-->
        <div class="payment_isMask" v-if="shopbBarrelType == true" @click="cancelBarrel">
          <div class="payment_isMask_box" @click="">
            <text class="payment_isMask_headerTitle">添加{{ barrelTitle }}</text>
            <div class="barrelInput" @click="chooseShop">
              <text class="barrelInputTitle">{{ barrelInputText }}</text>
              <text class="barrelInputIcon">&#xe695</text>
            </div>
            <div class="food-item" v-if="barrelData != null">
              <image class="food-item-picture" :src="barrelData.thumbnail"></image>
              <div class="food-item-info">
                <text class="food-item-title">{{ barrelData.name }}</text>
                <div class="product_botton_box" style="display:flex;flex-direction:row;">
                  <div class="product_botton_left" @click="reductionBarrel">
                    <text class="product_botton_icon">&#xe609;</text>
                  </div>
                  <input @change="numBarrel" class="product_botton_input" ref="input1"
                         @blur="inputBarrel" type="number"
                         v-model="barrelData.quantity"/>
                  <div class="product_botton_right" @click="addBarrel">
                    <text class="product_botton_icon">&#xe620;</text>
                  </div>
                </div>
                <div class="food-item-price">
                  <text class="food-item-money">￥{{ barrelData.price }}</text>
                </div>
              </div>
            </div>
            <div class="payment_isMask_bottom">
              <button class="payment_isMask_right_button" @click="cancelBarrel" text="取消"
                      model="gray"></button>
              <button class="payment_isMask_left_button" @click="saveBarrel" text="确定"></button>
            </div>
          </div>
        </div>
        <div style="width: 500px;height: 150px"></div>
      </cell>
    </list>
  </div>
</template>

<script>
const storage = weex.requireModule('storage')
const modal = weex.requireModule('modal')
import myNavbar from '../../../components/myNavbar/myNavbar.vue'
import shippingSite from '../../../pages/member/declaration/components/shippingSite.vue'
import personnel from '../../../pages/member/declaration/components/personnel.vue'
import {
  find, dispatch, shipping, complete, updateTrackingNo
} from '../../../api/shipping';
import {update} from '@/api/payment'
import {getMenuTree} from '@/api/sysMch'
import {
  list
} from '@/api/product'
import gps from "../../../utils/gps";

const geolocation = app.requireModule("eeui/geolocation");
const eeui = app.requireModule('eeui');
const picker = weex.requireModule('picker')
import {receiverLocation} from '@/api/mapLine'
import {addVirtaul, decVirtaul} from '@/api/virtualProduct'

export default {
  data() {
    return {
      orderForm: [],
      itemList: [],
      barrelForm: [],
      lng: null,
      lat: null,
      barrelInputText: '请选择桶类型',
      products: [],
      productsItem: [],
      shopName: '',
      shopIndex: 0,
      personnelIndex: 0,
      personnelName: '',
      siteType: false,
      personnelType: false,
      shopId: '',
      operatorId: '',
      title: '送货',
      receiverId: '',

      shippingType: false,
      shippingTitle: '发货',
      updateType: false,
      updateTitle: '修改',
      aDeliveryType: false,
      aDeliveryTitle: '配送',
      deliveryType: false,
      deliveryTitle: '送达',
      receivedType: false,
      receivedTitle: '核销',
      receivableQuantity: 0,
      pay: [
        {
          amount: 0,
          chk: false,
          isShow: true,
          paymentPluginId: "cashPayPlugin",
          paymentPluginName: "实收现金",
          chkType: false,
          balance: 0,
          img: 'http://rzico-weex.oss-cn-hangzhou.aliyuncs.com/images/cashImg.png',
          status: 0,
          method: 1,
          attach: '',
          id: '',
          quantity: 0
        },
        {
          amount: 0,
          chk: false,
          isShow: true,
          paymentPluginId: "paperPayPlugin",
          paymentPluginName: "纸质水票",
          chkType: false,
          balance: 0,
          img: 'http://rzico-weex.oss-cn-hangzhou.aliyuncs.com/images/tickets.png',
          status: 0,
          method: 1,
          attach: '',
          id: '',
          quantity: 0
        },
        {
          amount: 0,
          chk: false,
          isShow: true,
          paymentPluginId: "debtPayPlugin",
          paymentPluginName: "月结欠款",
          chkType: false,
          balance: 0,
          img: 'http://rzico.oss-cn-shenzhen.aliyuncs.com/img/zhuanzhang1.png',
          status: 0,
          method: 1,
          attach: '',
          id: '',
          quantity: 0
        }
      ],
      payType: false,
      inputIndex: 0,
      amountInput: 0,
      payments: [],
      emptyBarrelLess: 0,
      emptyBarrelMany: 0,
      isWaterShow: false,
      paymentVo: [],
      payListType: false,
      shopbBarrelType: false,
      barrelData: null,
      barrelTitle: '押桶',
      amountPayable: 0,
      discount: 0,
      freight: 0,
      amount: 0,
      receivableAmount: 0,
      waterQutity: 0,
      payId: 'cashPayPlugin',
      accordingTitle: false,
      payTitle: '',
    }
  },
  components: {
    myNavbar, shippingSite, personnel
  },
  created() {
    this.loadMenus()
    this.initIconFont()
    this.id = app.config.params
  },
  mounted() {
    this.findClick(this.id)
    let _this = this;
    geolocation.get((ret) => {
      _this.lng = ret.longitude;
      _this.lat = ret.latitude;
      let center = []
      let postion = gps.gcj_encrypt(_this.lat, _this.lng);
      _this.lat = postion.lat;
      _this.lng = postion.lng;
    });
  },
  filters: {
    price(value) {
      var toFixedNum = Number(value).toFixed(3);
      var realVal = toFixedNum.substring(0, toFixedNum.toString().length - 1);
      return realVal;
    },
    number(value) {
      var toFixedNum = Number(value).toFixed(0);
      return toFixedNum;
    }
  },
  methods: {
    loadMenus() {
      getMenuTree().then(res => {
        res.data.forEach(list => {
          if (list.permission === 'product.list') {
            const loadWater = list.childrens.find(item => {
              return item.permission === 'waterTicket-list'
            })
            if (loadWater !== undefined) {
              this.isWaterShow = true

            }
          }
        })
        this.pay.forEach(item => {
          if (item.paymentPluginId == 'paperPayPlugin') {
            item.isShow = this.isWaterShow
          }
        })
      })

    },
    findClick(data) {
      var _this = this
      _this.itemList = []
      _this.barrelForm = []
      _this.paymentVo = []
      _this.updatePay()
      find(data).then(
          res => {
            var itemList = []
            if (res.type == 'success') {
              _this.orderForm = res.data.shipping
              _this.receiverId = res.data.receiverId
              _this.amountPayable = res.data.amountPayable
              _this.discount = res.data.discount
              _this.freight = res.data.freight
              _this.amount = res.data.amount
              _this.orderForm.createDate = _this.formatTime(_this.orderForm.createDate)
              // _this.orderForm.itemList.forEach(function (item) {
              //     item.thumbnail = _this.thumbnail(item.thumbnail, 170, 170)
              // })
              _this.itemList = _this.orderForm.itemList
              _this.itemList.forEach(function (item) {
                if (item.emptyBarrelQuantity == null) {
                  item.emptyBarrelQuantity = 0
                } else {
                  if (item.emptyBarrelQuantity <= 0) {
                    item.emptyBarrelQuantity = Number(item.quantity).toFixed(0)
                  } else {
                    item.emptyBarrelQuantity = Number(item.emptyBarrelQuantity).toFixed(0)
                  }
                }
                if (item.subType == 4) {
                  itemList.push(item)
                }
              })
              console.info('配送方式')
              console.info(_this.orderForm.shippingMethod)
              _this.receivableQuantity = res.data.receivableQuantity
              _this.receivableAmount = res.data.receivableAmount
              var shippingStatus = _this.orderForm.shippingStatus
              var shippingMethods = _this.orderForm.shippingMethod
              if ((itemList.length > 0 && shippingStatus == 2 && shippingMethods == 2) || (itemList.length > 0 && shippingStatus == 3 && shippingMethods == 2)) {
                _this.payListType = true
              } else {
                _this.payListType = false
              }
              if (_this.orderForm.shippingMethod == 0) {
                _this.title = '发货'
              } else if (_this.orderForm.shippingMethod == 2) {
                _this.title = '送货'
              }
              if (_this.orderForm.shopId == undefined) {
                _this.shopId = ''
                _this.shopName = ''
              } else {
                _this.shopId = _this.orderForm.shopId
                _this.shopName = res.data.shopName
              }
              if (_this.orderForm.shippingEmployeeId == undefined) {
                _this.operatorId = ''
                _this.personnelName = ''
              } else {
                _this.operatorId = _this.orderForm.shippingEmployeeId
                _this.personnelName = res.data.shippingEmployeeName
              }
              if (res.data.payments.length > 0) {
                _this.payments = res.data.payments
                res.data.payments.forEach(function (item) {
                  if (item.paymentPluginId == 'cashPayPlugin') {
                    _this.pay[0].amount += Number(item.amount)
                    _this.pay[0].id = item.id
                    _this.pay[0].quantity = item.quantity
                  } else if (item.paymentPluginId == 'paperPayPlugin') {
                    _this.pay[1].amount += Number(item.amount)
                    _this.pay[1].id = item.id
                    _this.pay[1].quantity = item.quantity
                  } else if (item.paymentPluginId == 'debtPayPlugin') {
                    _this.pay[2].amount += Number(item.amount)
                    _this.pay[2].id = item.id
                    _this.pay[2].quantity = item.quantity
                  } else {
                    _this.paymentVo.push(item)
                  }
                })
              }
              res.data.virtualProductList.forEach(function (item) {
                if (item.orderId == null) {
                  _this.barrelForm.push(item)
                }
              })
              _this.receiverLocationClick()
            }
          }
      ).catch(error => {
      })
    },

    updatePay() {
      this.pay = [
        {
          amount: 0,
          chk: false,
          isShow: true,
          paymentPluginId: "cashPayPlugin",
          paymentPluginName: "实收现金",
          chkType: false,
          balance: 0,
          img: 'http://rzico-weex.oss-cn-hangzhou.aliyuncs.com/images/cashImg.png',
          status: 0,
          method: 1,
          attach: '',
          id: '',
          quantity: 0
        },
        {
          amount: 0,
          chk: false,
          isShow: true,
          paymentPluginId: "paperPayPlugin",
          paymentPluginName: "纸质水票",
          chkType: false,
          balance: 0,
          img: 'http://rzico-weex.oss-cn-hangzhou.aliyuncs.com/images/tickets.png',
          status: 0,
          method: 1,
          attach: '',
          id: '',
          quantity: 0
        },
        {
          amount: 0,
          chk: false,
          isShow: true,
          paymentPluginId: "debtPayPlugin",
          paymentPluginName: "月结欠款",
          chkType: false,
          balance: 0,
          img: 'http://rzico.oss-cn-shenzhen.aliyuncs.com/img/zhuanzhang1.png',
          status: 0,
          method: 1,
          attach: '',
          id: '',
          quantity: 0
        }
      ]
    },
    //配送站点
    siteClick() {
      this.siteType = true
    },
    cencleSite() {
      this.siteType = false
    },
    completeSite(data) {
      this.siteType = false
      this.shopId = data.from.id
      this.shopName = data.from.name
      this.shopIndex = data.shopIndex
    },
    //配送人员
    personnelClick() {
      this.personnelType = true
    },
    completePersonnel(data) {
      this.personnelType = false;
      this.operatorId = data.from.id
      this.personnelName = data.from.name
      this.personnelIndex = data.personnelIndex
    },
    cenclePersonnel() {
      this.personnelType = false
    },
    aDeliveryClick() {
      var _this = this;
      if (_this.shopId == '') {
        eeui.toast('请选择配送站点')
        return
      }
      if (_this.operatorId == '') {
        eeui.toast('请选择配送人员')
        return
      }
      var form = {
        shopId: _this.shopId,
        shippingEmployeeId: _this.operatorId,
      };
      _this.aDeliveryTitle = '加载中';
      _this.aDeliveryType = true
      dispatch(_this.id, form).then(response => {
        _this.aDeliveryTitle = '配送';
        _this.aDeliveryType = false
        eeui.toast(response.content)
        eeui.closePage()
        storage.setItem('distribution', 'true', event => {

        })
      }).catch(error => {
        _this.aDeliveryTitle = '配送';
        _this.aDeliveryType = false
      })
    },
    deliveryClick() {
      var _this = this;
      console.log('送达')
      var amount = 0
      var waterAmount = 0
      var waterQutity = 0
      var totalAmount = 0
      totalAmount = (Number(_this.receivableAmount) + Number(_this.amount)).toFixed(2)
      _this.pay.forEach(function (item) {
        amount += Number(item.amount)
        if (item.paymentPluginId == "paperPayPlugin") {
          waterAmount = item.amount
          waterQutity = item.quantity
        }
        ;
      });
      if (waterAmount > 0 && waterQutity == 0) {
        eeui.toast('请输入水票张数')
        return
      }
      console.log(totalAmount)
      console.log(amount)
      if (amount > totalAmount) {
        eeui.toast('请勿超出总应收')
        return
      }
      if (amount < _this.amount) {
        eeui.toast('本单应收不足')
        return;
      }
      _this.deliveryTitle = '加载中';
      _this.deliveryType = true
      // var params = new URLSearchParams()
      // params.append('lat', this.lat)
      // params.append('lng', this, lng)
      shipping(_this.id, {'lat': this.lat,'lng': this.lng}, JSON.stringify(this.itemList)).then(response => {
        _this.deliveryTitle = '送达';
        _this.deliveryType = false
        eeui.toast(response.content)
        eeui.closePage()
        storage.setItem('distribution', 'true', event => {

        })
      }).catch(error => {
        _this.deliveryTitle = '送达';
        _this.deliveryType = false
      })
    },
    receivedClick() {
      var _this = this
      var amount = 0
      var waterAmount = 0
      var waterQutity = 0
      var totalAmount = 0
      totalAmount = (Number(_this.receivableAmount) + Number(_this.amount)).toFixed(2)
      _this.pay.forEach(function (item) {
        amount += Number(item.amount)
        if (item.paymentPluginId == "paperPayPlugin") {
          waterAmount = item.amount
          waterQutity = item.quantity
        }
      })
      if (waterAmount > 0 && waterQutity == 0) {
        eeui.toast('请输入水票张数')
        return
      }
      if (amount > totalAmount) {
        eeui.toast('请勿超出总应收')
        return
      }

      if (amount < _this.amount) {
        eeui.toast('本单应收不足')
        return;
      }
      _this.receivedType = true;
      _this.receivedTitle = '加载中'
      complete(_this.id, JSON.stringify(this.itemList)).then(response => {
        _this.receivedType = false;
        _this.receivedTitle = '核销'
        eeui.toast(response.content)
        eeui.closePage()
        storage.setItem('distribution', 'true', event => {

        })
      }).catch(error => {
        _this.receivedType = false;
        _this.receivedTitle = '核销'
      })
    },

    reductionBarrel() {
      if (this.barrelData.quantity == 1) {
        return
      }
      this.barrelData.quantity = Number(this.barrelData.quantity) - 1
    },

    addBarrel() {
      this.barrelData.quantity = Number(this.barrelData.quantity) + 1
    },
    inputBarrel(index) {
      var _this = this
      if (this.barrelData.quantity < 1) {
        this.barrelData.quantity = 1
      }
    },
    numBarrel() {

    },
    //加减数量
    addClick(index) {
      var _this = this
      this.itemList[index].emptyBarrelQuantity = Number(this.itemList[index].emptyBarrelQuantity) + 1
      this.$forceUpdate()
    },
    reductionClick(index) {
      var _this = this
      if (this.itemList[index].emptyBarrelQuantity == 0) {
        return
      }
      this.itemList[index].emptyBarrelQuantity = Number(this.itemList[index].emptyBarrelQuantity) - 1
      this.$forceUpdate()
    },
    inputClick(index) {
      var _this = this
      eeui.input({
        title: "请输入回桶数",
        buttons: ["取消", "确定"],
        inputs: [{
          type: 'number',
          value: this.itemList[index].emptyBarrelQuantity,
          autoFocus: true,
        },]
      }, function (result) {
        if (result.status == "click" && result.title == "确定") {
          if (result.data[0] == "") {
            _this.itemList[index].emptyBarrelQuantity = 0
          } else {
            _this.itemList[index].emptyBarrelQuantity = result.data[0]
          }
        }
      });
    },
    shippingClick() {
      var _this = this;
      _this.shippingType = true;
      _this.shippingTitle = '加载中'
      console.log('11223344')
      console.log(_this.id)
      console.log(_this.itemList)
      shipping(_this.id,{}, JSON.stringify(_this.itemList)).then(response => {
        _this.shippingType = false;
        _this.shippingTitle = '发货'
        eeui.toast(response.content)
        eeui.closePage()
        storage.setItem('distribution', 'true', event => {
        })
      }).catch(error => {
        _this.shippingType = false;
        _this.shippingTitle = '发货'
      })
    },
    updateTrackingNoClick() {
      var _this = this;
      _this.updateType = true;
      _this.updateTitle = '加载中'
      updateTrackingNo(_this.id, JSON.stringify(this.itemList)).then(response => {
        _this.updateType = false;
        _this.updateTitle = '修改'
        eeui.toast(response.content)
        eeui.closePage()
        storage.setItem('distribution', 'true', event => {

        })
      }).catch(error => {
        _this.updateType = false;
        _this.updateTitle = '修改'
      })
    },
    // 后天无返回所需参数
    receiverLocationClick() {
      var _this = this
      if (_this.receiverId == undefined) {
        _this.receiverId = ''
      }
      receiverLocation({receiverId: _this.receiverId}).then(
          res => {
            if (_this.orderForm.shopId == undefined) {
              _this.shopId = res.data.mapLine.shopId
              _this.shopName = res.data.shopName
            }
            if (_this.orderForm.shippingEmployeeId == undefined) {
              _this.operatorId = res.data.mapLine.shippingEmployeeId
              _this.personnelName = res.data.shippingEmployeeName
            }
          }
      ).catch(error => {

      })
    },
    copyAddressClick() {
      eeui.toast('复制成功')
      eeui.copyText(this.orderForm.consignee + this.orderForm.phone + this.orderForm.address)
    },
    editShipping(index) {
      this.inputIndex = index
      this.amountInput = this.pay[index].amount
      this.waterQutity = Number(this.pay[index].quantity).toFixed(0)
      this.payId = this.pay[index].paymentPluginId
      this.payType = !this.payType
      if (index == 0) {
        this.payTitle = '实收现金'
      } else if (index == 1) {
        this.payTitle = '纸质水票'
      } else if (index == 2) {
        this.payTitle = '月结欠款'
      }
    },
    determineClick() {
      this.payType = !this.payType
      this.pay[this.inputIndex].amount = this.amountInput
      this.pay[this.inputIndex].quantity = this.waterQutity
      this.updateClick()
    },
    cancelClick() {
      this.payType = !this.payType
    },
    // 更新付款金额
    updateClick() {
      var _this = this
      var payments = []
      var orderId = null
      var debtAmount = 0
      _this.pay.forEach(function (item) {
        if (item.paymentPluginId == "debtPayPlugin") {
          debtAmount = item.amount
        }
      })
      if (debtAmount > _this.amount) {
        this.pay[this.inputIndex].amount = _this.amount
        eeui.toast('输入欠款数请勿超出本单应收')
      }
      if (_this.orderForm.orderId != null) {
        orderId = _this.orderForm.orderId
      } else {
        orderId = _this.orderForm.warehouseId
      }
      _this.pay.forEach(function (item) {
        if (item.quantity == "NaN") {
          item.quantity = 0
        }
        var pay = {
          amount: item.amount,
          createBy: _this.orderForm.createBy,
          deleted: _this.orderForm.deleted,
          enterpriseId: _this.orderForm.enterpriseId,
          memberId: _this.orderForm.memberId,
          modifyDate: _this.orderForm.modifyDate,
          orderId: orderId,
          orderSn: _this.orderForm.orderSn,
          orderType: 0,
          paymentPluginId: item.paymentPluginId,
          paymentPluginName: item.paymentPluginName,
          refund: 0,
          shopId: _this.orderForm.shopId,
          // sn:_this.orderForm.sn,
          status: item.status,
          type: 1,
          way: 1,
          employeeId: _this.orderForm.shippingEmployeeId,
          method: item.method,
          memo: '购买-' + _this.orderForm.itemList[0].name,
          quantity: item.quantity,
          attach: item.attach,
          id: item.id
        }
        payments.push(pay)
      })
      payments = JSON.stringify(payments)
      update(payments).then(
          res => {
            _this.findClick(this.id)
          }
      ).catch(error => {

      })
    },
    betClick(data) {
      this.barrelTitle = data
      this.barrelInputText = '请选择桶类型'
      this.barrelData = null
      this.loadProduct()
    },
    bucketBack(data) {
      this.barrelTitle = data
      this.barrelInputText = '请选择桶类型'
      this.barrelData = null
      this.loadProduct()
    },
    chooseShop() {
      var _this = this
      picker.pick({
        items: this.productsItem
      }, event => {
        if (event.result === 'success') {
          _this.barrelData = _this.products[event.data]
          _this.barrelInputText = _this.products[event.data].name
        }
      })
    },
    cancelBarrel() {
      this.shopbBarrelType = false
    },
    saveBarrel() {
      var _this = this
      if (this.barrelData == null) {
        eeui.toast('请选择商品')
        return
      }
      if (_this.barrelData.quantity == 0 || _this.barrelData.quantity == null){
        eeui.toast('请输入数量')
        return
      }
      if (_this.barrelTitle == '押桶') {
        addVirtaul({
          productId: _this.barrelData.id,
          quantity: _this.barrelData.quantity,
          shippingId: _this.orderForm.id,
        }).then(response => {
          _this.findClick(this.id)
          _this.shopbBarrelType = false
        }).catch(error => {
        })
      } else {
        decVirtaul({
          productId: _this.barrelData.id,
          quantity: _this.barrelData.quantity,
          shippingId: _this.orderForm.id,
        }).then(response => {
          _this.findClick(this.id)
          _this.shopbBarrelType = false
        }).catch(error => {

        })
      }
    },
    accordingClick() {
      this.accordingTitle = !this.accordingTitle
    },
    loadProduct() {
      var _this = this
      _this.productsItem = []
      list({
        mchId: this.getGlobalData().mchId,
        subType: 3,
        type: 1
      }).then(res => {
        res.data.data.forEach(item => {
          item.quantity = 1
          var items = item.name + ' ' + item.price
          _this.productsItem.push(items)
        })
        this.products = res.data.data
        if (_this.products.length > 0) {
          _this.barrelData = _this.products[0]
          _this.barrelInputText = _this.products[0].name
        }
        this.shopbBarrelType = true
      })
    },
  }
}
</script>
<style lang="css" src="../../../style/wx.css"/>
<style scoped>
.app, body {
  background-color: rgba(248, 248, 248, 0.8);
}

.app {
  flex: 1;
}

.shipping_order {
  width: 690px;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 16px;
  margin-top: 30px;
  margin-left: 30px;
  box-sizing: border-box;
  padding-top: 20px;
  padding-left: 25px;
  padding-right: 25px;
  padding-bottom: 20px;
  overflow: hidden;
}

.shipping_order_Header {
  /*margin-top: 20px;*/
}

.shipping_order_Header_Title {
  font-size: 34px;
  font-weight: 400;
  color: rgba(26, 26, 30, 1);
}

.details_order_item {
  display: flex;
  flex-direction: row;
  /*margin-bottom: 40px;*/
  margin-top: 20px;
  position:relative;
}

.details_order_item_img {
  width: 170px;
  height: 170px;
  background: rgba(250, 250, 250, 1);
  border-radius: 4px;
  overflow: hidden;
}

.details_order_item_content {
  display: flex;
  flex-direction: column;
  width: 450px;
  margin-left: 20px;
  position: relative;
}

.details_order_item_content_top {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}

.details_order_item_title {
  font-size: 28px;
  font-weight: 400;
  color: rgba(26, 26, 30, 1);
  line-height: 42px;
  text-overflow: ellipsis;
  lines: 1;
  width: 350px;
}


.details_order_item_content_bottom {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
}

.details_order_item_subtitle {
  font-size: 24px;
  font-weight: 400;
  color: rgba(26, 26, 30, 1);
  line-height: 36px;
  opacity: 0.5;
  lines: 2;
  text-overflow: ellipsis;
  width: 360px;
}

.details_order_item_number {
  font-size: 24px;
  font-weight: 400;
  color: rgba(26, 26, 30, 1);
  line-height: 36px;
  opacity: 0.5;
}

.details_order_red_icon {
  font-size: 20px;
  font-weight: 500;
  color: rgba(231, 91, 83, 1);
  line-height: 42px;
}

.details_order_red_font {
  font-size: 28px;
  font-weight: 500;
  color: rgba(231, 91, 83, 1);
  line-height: 42px;
}

.details_address {
  width: 700px;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /*padding-top: 25px;*/
  padding-right: 25px;
  /*padding-bottom: 25px;*/
  margin-top: 10px;
  box-sizing: border-box;
}

.details_address_top {
  margin-bottom: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.details_address_name {
  font-size: 30px;
  font-weight: 500;
  color: rgba(26, 26, 30, 1);
}

.details_address_phone {
  font-size: 30px;
  font-weight: 500;
  color: rgba(26, 26, 30, 1);
  margin-left: 10px;
}

.details_address_bottom {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.details_address_bottom_memo {
  display: flex;
  flex-direction: row;
  align-items: center;
  border-top-color: rgba(0, 0, 0, 0.1);
  border-top-width: 1px;
  border-top-style: solid;
  padding-top: 20px;
  width: 640px;
}

.details_address_title {
  font-size: 28px;
  font-weight: 400;
  width: 650px;
  color: rgba(26, 26, 30, 1);
}

.shippingInfo {
  display: flex;
  flex-direction: row;
  align-items: center;
  /*margin-bottom: 20px;*/
}

.shippingInfo_title {
  width: 170px;
  display: block;
  font-size: 30px;

}

.shippingInfo_box {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  width: 440px;
  margin-left: 20px;
}

.shippingInfo_subtitle {
  font-size: 28px;
  color: rgba(26, 26, 30, 0.3);
  line-height: 50px;
}

.submit_product_details_Icon {
  /*font-size: 40px;*/
  /*color: #888888;*/
  /*width: 30px;*/
  /*height: 50px;*/
  /*padding-top: 2px;*/
  font-family: iconfont2;
  font-size: 26px;
  color: rgba(42, 42, 54, 1);
  opacity: 0.3;
  height: 50px;
  line-height: 50px;
}

.submit_product_details_subtitle {
  font-size: 24px;
  color: rgba(26, 26, 30, 0.3);
  line-height: 26px;
}

.isMask_Botton {
  width: 750px;
  /*position: absolute;*/
  /*bottom: 30px;*/
  /*left: 0;*/
  margin-top: 40px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.isMask_Botton_Box {
  width: 690px;
  height: 80px;
  border-radius: 40px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-size: 32px;
  color: white;
}

.isMask_Botton_Title {
  font-size: 30px;
}

.emptyBarrel_box {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
}

.logistics_box {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 20px;
}

.product_botton_left {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  border-right-color: rgba(0, 0, 0, 0.2);
  border-right-width: 1px;
  border-right-style: solid;
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.product_botton_right {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
  border-left-color: rgba(0, 0, 0, 0.2);
  border-left-width: 1px;
  border-left-style: solid;
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.product_botton_input {
  width: 100px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 26px;
  color: rgba(0, 0, 0, 0.5);
  text-align: center;
}

.product_botton_input_Title {
  font-size: 26px;
  color: rgba(0, 0, 0, 0.5);
  text-align: center;
}

.logistics_input {
  /*height: 60px;*/
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 22px;
  color: rgba(0, 0, 0, 0.5);
  /*text-align: center;*/
  width: 445px;
  padding: 20px;
  box-sizing: border-box;
}

.product_botton_box {
  display: flex;
  flex-direction: row;
  border-color: rgba(0, 0, 0, 0.2);
  border-width: 1px;
  border-style: solid;
  border-radius: 6px;
  margin-top: 5px;
  width: 220px;
}

.product_botton_icon {
  font-size: 26px;
  font-family: iconfont2;
  color: rgba(0, 0, 0, 0.5);
}

.emptyBarrel_title {
  font-size: 28px;
  font-weight: 400;
  color: rgba(26, 26, 30, 0.5);
  margin-top: 4px;
  width: 170px;
  text-align: right;
  margin-right: 20px;
}

.details_lines {
  width: 2px;
  height: 28px;
  background-color: rgba(0, 0, 0, 0.2);
  margin-left: 20px;
}

.details_right_copy {
  font-size: 28px;
  color: red;
  margin-left: 20px;
}


.submit_payMethod_ContentTwo {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-items: center;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  border-bottom-width: 1px;
  border-bottom-style: solid;
  padding-top: 30px;
  padding-bottom: 30px;
  box-sizing: border-box;
  width: 640px;
}

.submit_payMethod_ContentThree {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-items: center;
  padding-top: 30px;
  padding-bottom: 10px;
  box-sizing: border-box;
  width: 640px;
}

.submit_payMethod_Content_Row {
  display: flex;
  flex-direction: row;
}

.submit_payMethod_Content_Img {
  width: 30px;
  height: 30px;
  margin-right: 20px;
}

.submit_payMethod_edit {
  width: 30px;
  height: 30px;
}

.submit_payMethod_Content_ImgTwo {
  width: 40px;
  height: 30px;
  margin-right: 10px;
  position: relative;
  left: -4px;
}

.submit_payMethod_Content_Title {
  font-size: 28px;
  font-weight: 400;
  color: rgba(26, 26, 30, 1);
  display: block;
}

.payment_isMask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
}

.payment_isMask_box {
  width: 520px;
  background-color: white;
  border-radius: 6px;
  display: flex;
  align-items: center;
  padding-top: 30px;
  padding-bottom: 30px;
}

.payment_isMask_headerTitle {
  font-size: 30px;
  margin-top: 10px;
}

.payment_isMask_input {
  width: 290px;
  height: 70px;
  border-style: solid;
  border-width: 1px;
  border-color: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  /*margin-top: 30px;*/
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}

.payment_isMask_bottom {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-top: 30px;
  /*background-color: red;*/
  width: 440px;
}

.payment_isMask_left_button {
  font-size: 24px;
  /*margin-left: 37.5px;*/
  /*margin-right: 37.5px;*/
  margin-bottom: 20px;
  width: 150px;
  height: 60px;
}

.payment_isMask_right_button {
  font-size: 24px;
  /*margin-left: 37.5px;*/
  /*margin-right: 37.5px;*/
  margin-bottom: 20px;
  width: 150px;
  height: 60px;
  opacity: 0.5;
}

.waterBottonBox {
  width: 750px;
  height: 100px;
  background-color: white;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  position: fixed;
  bottom: 0;
  border-top-color: rgba(0, 0, 0, 0.1);
  border-top-width: 1px;
  border-top-style: solid;
  padding: 20px;
  box-sizing: border-box;
}

.water_botton {
  width: 150px;
  height: 60px;
  border-radius: 6px;
  font-size: 22px;
  margin-left: 20px;
}

.shipping_pay_history {
  border-top-style: solid;
  border-top-width: 1px;
  border-top-color: rgba(0, 0, 0, 0.2);
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  padding-top: 20px;
  /*padding-bottom: 20px;*/
  box-sizing: border-box;
}

.shipping_pay_total {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  /*padding-top: 20px;*/
  /*padding-bottom: 20px;*/
  box-sizing: border-box;
}

.details_order_item_bottom {
  padding-top: 40px;
  border-top-color: rgba(232, 234, 237, 1);
  border-top-width: 1px;
  border-top-style: solid;
  margin-top: 20px;
}

.row_sb_mg20 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.details_order_item_bottom_titel {
  font-size: 24px;
  font-weight: 400;
  color: rgba(26, 26, 30, 1);
  line-height: 36px;
}


.details_order_item_bottom_totalTitel {
  font-size: 24px;
  font-weight: 400;
  color: rgba(26, 26, 30, 1);
  line-height: 36px;
}

.details_order_red_icon {
  font-size: 20px;
  font-weight: 500;
  color: rgba(231, 91, 83, 1);
  line-height: 42px;
}

.details_order_red_font {
  font-size: 28px;
  font-weight: 500;
  color: rgba(231, 91, 83, 1);
  line-height: 42px;
}

.details_order_black_icon {
  font-size: 20px;
  font-weight: 500;
  color: black;
  line-height: 42px;
}

.details_order_black_font {
  font-size: 28px;
  font-weight: 500;
  color: black;
  line-height: 42px;
}

.food-item {
  flex-direction: row;
  align-items: flex-start;
  background-color: white;
  border-radius: 16px;
  padding-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
  width: 479px;
}

.food-item-picture {
  width: 150px;
  height: 150px;
  border-radius: 16px;
  background-color: rgba(0, 0, 0, 0.1);
}

.food-item-info {
  margin-left: 20px;
  width: 250px;
  height: 150px;
  position: relative;
}

.food-item-title {
  color: #333333;
  font-size: 28px;
  font-family: PingFang SC;
  font-weight: 400;
  color: rgba(26, 26, 30, 1);
  line-height: 40px;
  lines: 1;
  text-overflow: ellipsis;
  width: 300px;
}

.food-item-price {
  width: 310px;
  flex-direction: row;
  align-items: center;
  position: absolute;
  bottom: 0;
}

.food-item-money {
  flex: 1;
  font-weight: bold;
  color: #f01414;
  font-size: 30px;
  margin-right: 16px;
}

.accordingCSS {
  position: absolute;
  bottom: 0;
  width: 640px;
  height: 60px;
  background-image: linear-gradient(to top, #dbdbdb, rgba(255, 255, 255, 1));
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0.4;
}

.accordingIcon {
  font-family: iconfont2;
  font-size: 40px;
  color: rgba(0, 0, 0, 0.4);
}

.barrelInput {
  border-color: rgba(0, 0, 0, 0.1);
  border-width: 1px;
  border-style: solid;
  width: 440px;
  height: 60px;
  border-radius: 6px;
  margin-top: 20px;
  padding: 10px;
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
}

.barrelInputTitle {
  font-size: 24px;
  color: rgba(0, 0, 0, 0.3);
}

.barrelInputIcon {
  font-family: iconfont2;
  font-size: 24px;
  color: rgba(0, 0, 0, 0.3);
}

.icon {
  font-family: iconfont2;
  font-size: 26px;
  color: rgba(42, 42, 54, 1);
  opacity: 0.3;
  margin-bottom: 1px;
}
.details_order_item_content_tag{
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 30px;
}
.details_order_item_content_tagTitle{
  font-size: 16px;
  color: white;
}
</style>
